<template>
  <div>
    <h2 class="stu">学生的学历</h2>
    <h2 class="tec">教师的学历</h2>
    <div id="displayLevelTec" class="displayLevelTec"></div>
    <div id="displayLevelStu" class="displayLevelStu"></div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      arrName:[],
      arrValue:[],
      sumValue:0,
      objData:'',
      optionData:'',

      arrNameTec:[],
      arrValueTec:[],
      sumValueTec:0,
      objDataTec:'',
      optionDataTec:'',
      data : [{
        name: "小学",
        value: 0
      },
        {
          name: "初中",
          value: 0
        },
        {
          name: "高中",
          value: 0
        },
        {
          name: "本科",
          value: 0
        }
      ],
      dataTec : [{
        name: "本科",
        value: 0
      },
        {
          name: "硕士",
          value: 0
        },
        {
          name: "博士",
          value: 0
        },
      ]
    }
  },
  methods: {
    initData(){
      let _this = this
      this.$axios({
        method: "GET",
        url: "http://localhost/student/findAll",
      }).then(response => {
        let Stu = response.data
        for(let i of Stu)
        {
          this.sumValue++;
          if(i.slevel=='小学')
          {
            this.data[0].value++;
          }
          if(i.slevel=='初中')
          {
            this.data[1].value++;
          }
          if(i.slevel=='高中')
          {
            this.data[2].value++;
          }
          if(i.slevel=='本科')
          {
            this.data[3].value++;
          }

        }



        for(let i in this.data){
          console.log(this.data[i].value)
          this.arrValue.push(this.data[i].value)
        }

        console.log(this.data)
        this.arrName = this.getArrayValue(this.data, "name");


        console.log(this.arrValue)
        console.log(this.arrName)

        this.objData = this.array2obj(this.data, "name");
        this.optionData = this.getData(this.data)


        let myChart = echarts.init(document.getElementById('displayLevelStu'));
        let option = {
          backgroundColor: '#E9EEF3',
          color: [{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(10,31,95,1)'
            }, {
              offset: 1,
              color: 'rgba(1,232,254,1)'
            }],
            global: false
          }],
          grid: {
            top: '16%',
            bottom: '54%',
            left: "50%",
            containLabel: false
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            z: 3,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              inside: false,
              textStyle: {
                color: "RGB(78,184,252)",
                fontSize: 25,
              },
              show: true
            },
            data: this.optionData.yAxis
          }],
          xAxis: [{
            show: false
          }],
          series: this.optionData.series
        };
        if (option && typeof option === 'object') {
          myChart.setOption(option);
        }

        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener('resize',function() {myChart.resize()});
      })
    },
    initDataTec(){
      let _this = this
      this.$axios({
        method: "GET",
        url: "http://localhost/teacher/findAll",
      }).then(response => {
        let Tec = response.data
        for(let i of Tec)
        {
          this.sumValueTec++;
          if(i.level=='本科')
          {
            this.dataTec[0].value++;
          }
          if(i.level=='硕士')
          {
            this.dataTec[1].value++;
          }
          if(i.level=='博士')
          {
            this.dataTec[2].value++;
          }

        }



        for(let i in this.dataTec){
          this.arrValueTec.push(this.dataTec[i].value)
        }


        this.arrNameTec = this.getArrayValueTec(this.dataTec, "name");

        this.objDataTec = this.array2objTec(this.dataTec, "name");
        this.optionDataTec = this.getDataTec(this.dataTec)


        let myChart = echarts.init(document.getElementById('displayLevelTec'));
        let option = {
          backgroundColor: '#E9EEF3',
          color: [{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(10,31,95,1)'
            }, {
              offset: 1,
              color: 'rgba(1,232,254,1)'
            }],
            global: false
          }],
          grid: {
            top: '16%',
            bottom: '54%',
            left: "50%",
            containLabel: false
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            z: 3,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              inside: false,
              textStyle: {
                color: "RGB(78,184,252)",
                fontSize: 25,
              },
              show: true
            },
            data: this.optionDataTec.yAxis
          }],
          xAxis: [{
            show: false
          }],
          series: this.optionDataTec.series
        };
        if (option && typeof option === 'object') {
          myChart.setOption(option);
        }

        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener('resize',function() {myChart.resize()});
      })
    },


    getArrayValueTec(array, key) {
      key = key || "value";
      let res = [];
      if (array) {
        array.forEach(function(t) {
          res.push(t[key]);
        });
      }
      return res;
    },

    array2objTec(array, key) {
      let resObj = {};
      for (let i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    },

    getDataTec(data) {
      let res = {
        series: [{
          name: "大环",
          type: 'gauge',
          splitNumber: 15,
          radius: '82%',
          center: ['50%', '55%'],
          startAngle: 90,
          endAngle: -269.9999,
          axisLine: {
            show: false,
            lineStyle: {
              color: [
                [1, '#1f59a7']
              ]
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            length: 32,
            lineStyle: {
              color: 'auto',
              width: 3.5
            }
          },
          axisLabel: {
            show: false
          },
          detail: {
            show: false
          }
        },
          {
            name: '小环',
            type: 'gauge',
            splitNumber: 15,
            radius: '78%',
            center: ['50%', '55%'],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#1f59a7',
                width: 3
              },
              length: 20,
              splitNumber: 5
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            }
          },
        ],
        yAxis: []
      };
      for (let i = 0; i < data.length; i++) {
        res.series.push({
          name: '学历',
          type: 'pie',
          clockWise: true,
          z: 2,
          hoverAnimation: false,
          radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],
          center: ["50%", "55%"],
          label: {
            show: true,
            formatter: '{d}%',
            color: 'RGB(246,175,101)',
            fontSize: 25,
            position: 'inside'
          },
          labelLine: {
            show: false
          },
          data: [{
            value: data[i].value,
            name: data[i].name
          }, {
            value: this.sumValueTec - data[i].value,
            name: '',
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            label: {
              show: false
            },
            hoverAnimation: false
          }]
        });
        res.series.push({
          name: '背景线',
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: true,
          hoverAnimation: false,
          radius: [71 - i * 15 + '%', 69 - i * 15 + '%'],
          center: ["50%", "55%"],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false
            },
            borderWidth: 5,
          },
          data: [{
            value: 100,
            itemStyle: {
              color: "RGB(12,64,128)",
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          }]
        });
        res.yAxis.push(data[i].name);
      }
      return res;
    },


    getArrayValue(array, key) {
      key = key || "value";
      let res = [];
      if (array) {
        array.forEach(function(t) {
          res.push(t[key]);
        });
      }
      return res;
    },

    array2obj(array, key) {
      let resObj = {};
      for (let i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    },

    getData(data) {
      let res = {
        series: [{
          name: "大环",
          type: 'gauge',
          splitNumber: 15,
          radius: '82%',
          center: ['50%', '55%'],
          startAngle: 90,
          endAngle: -269.9999,
          axisLine: {
            show: false,
            lineStyle: {
              color: [
                [1, '#1f59a7']
              ]
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            length: 32,
            lineStyle: {
              color: 'auto',
              width: 3.5
            }
          },
          axisLabel: {
            show: false
          },
          detail: {
            show: false
          }
        },
          {
            name: '小环',
            type: 'gauge',
            splitNumber: 15,
            radius: '78%',
            center: ['50%', '55%'],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#1f59a7',
                width: 3
              },
              length: 20,
              splitNumber: 5
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            }
          },
        ],
        yAxis: []
      };
      for (let i = 0; i < data.length; i++) {
        res.series.push({
          name: '学历',
          type: 'pie',
          clockWise: true,
          z: 2,
          hoverAnimation: false,
          radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],
          center: ["50%", "55%"],
          label: {
            show: true,
            formatter: '{d}%',
            color: 'RGB(246,175,101)',
            fontSize: 25,
            position: 'inside'
          },
          labelLine: {
            show: false
          },
          data: [{
            value: data[i].value,
            name: data[i].name
          }, {
            value: this.sumValue - data[i].value,
            name: '',
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            label: {
              show: false
            },
            hoverAnimation: false
          }]
        });
        res.series.push({
          name: '背景线',
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: true,
          hoverAnimation: false,
          radius: [71 - i * 15 + '%', 69 - i * 15 + '%'],
          center: ["50%", "55%"],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false
            },
            borderWidth: 5,
          },
          data: [{
            value: 100,
            itemStyle: {
              color: "RGB(12,64,128)",
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          }]
        });
        res.yAxis.push(data[i].name);
      }
      return res;
    },


  },
  mounted() {
    this.initData()
    this.initDataTec()
  },

  created() {

  }
}
</script>

<style scoped>
.stu{
  position: absolute;
  height: 20px;
  top: 0;
  left:400px;
  font-size: 18px;
  z-index: 1000;
}

.tec{
  position: absolute;
  top: 0;
  left:900px;
  font-size: 18px;
  z-index: 1000;
}

.displayLevelTec{
  position: absolute;
  width: 500px;
  height: 500px;
  top: 60px;
  left: 700px;
}

.displayLevelStu{
  position: absolute;
  width: 500px;
  height: 500px;
  top: 60px;
}


</style>
